import React, { Component } from 'react';
import moment from 'moment-timezone';
import classNames from 'classnames';
import {
  Button
} from '@folio/stripes/components';
import css from './DropDownTime.css';

class SuperDropDown extends Component {
  constructor(props) {
    super(props);
    this.lightTime = '';
    this.rightTime = '';
    this.secondTime = '';
    this.dateNumberDom = '';
    this.timeNumberDom = '';
    this.secondNumberDom = '';
  }

    dateNumber = (str, classId) => {
      const num = [];

      for (let i = 0; i < 24; i++) {
        if (i < 10) {
          num.push(<li
            key={`${str}-date-0${i}`}
            id={`${str}-date-0${i}`}
            onClick={(e) => {
              this.selectTime(e, classId);
            }}
            className={css.down_li}
          >
            {`0${i}`}

          </li>);
        } else {
          num.push(<li
            key={`${str}-date-${i}`}
            id={`${str}-date-${i}`}
            onClick={(e) => {
              this.selectTime(e, classId);
            }}
            className={css.down_li}
          >
            {i}

          </li>);
        }
      }
      return num;
    }

    secondNumber = (str, classId) => {
      const num = [];

      for (let i = 0; i < 60; i++) {
        if (i < 10) {
          num.push(<li
            key={`${str}-second-0${i}`}
            id={`${str}-second-0${i}`}
            onClick={(e) => {
              this.selectTime(e, classId);
            }}
            className={css.down_li}
          >
            {`0${i}`}

          </li>);
        } else {
          num.push(<li
            key={`${str}-second-${i}`}
            id={`${str}-second-${i}`}
            onClick={(e) => {
              this.selectTime(e, classId);
            }}
            className={css.down_li}
          >
            {i}

          </li>);
        }
      }
      return num;
    }

    timeNumber = (str, classId) => {
      const num = [];

      for (let i = 0; i < 60; i++) {
        if (i < 10) {
          num.push(<li
            key={`${str}-time-0${i}`}
            id={`${str}-time-0${i}`}
            onClick={(e) => {
              this.selectTime(e, classId);
            }}
            className={css.down_li}
          >
            {`0${i}`}

          </li>);
        } else {
          num.push(<li
            key={`${str}-time-${i}`}
            id={`${str}-time-${i}`}
            onClick={(e) => {
              this.selectTime(e, classId);
            }}
            className={css.down_li}
          >
            {i}

          </li>);
        }
      }
      return num;
    }

    getDOMContainer() {
      return this._pickerContainer;
    }

    getRootClass() {
      return classNames(
        css.timepickerContainer,
        { [`${css.srOnly}`]: !this.props.visible },
      );
    }

    render() {
      const divStyle = { 'height': '80%' };
      const heightStyle = { height: '100%' };
      const lightStyle = {
        'float': 'left',
        'width': '70px',
        'height': '100%',

      };
      const rightStyle = {
        'float': 'left',
        'width': '74px',
        'height': '100%',

      };

      const divHiddenOverflow = {
        'width': '120px',
        'height': '100%',
        'overflow': 'hidden auto',
        'textAlign': 'center',
        'paddingTop': '52px',
        'paddingBottom': '68px'
      };
      const divHiddenRightOverflow = {
        'width': '125px',
        'height': '100%',
        'overflow': 'hidden auto',
        'backgroundColor': 'white',
        'textAlign': 'center',
        'paddingTop': '52px',
        'paddingBottom': '68px'
      };
      const buttonDivStyle2 = {
        'paddingTop': '5px',
        'width': '100%',
        'textAlign': 'center',
        'borderTop': '1px solid rgba(0,0,0,.2)'
      };

      let time = this.props.selectedTime || new Date();

      if (!time) {
        time = moment(time).format('HH:mm:ss');
      }
      {
        setTimeout(() => {
          this.bindScrollEvent(time);
        }, 300);
      }

      return (
        <div
          style={heightStyle}
          ref={(c) => {
              this._pickerContainer = c;
            }}
          className={this.getRootClass()}
          id={`timeDD-${this.props.id}`}
          aria-hidden={!this.props.visible}
        >
          <div style={divStyle}>
              <div style={lightStyle}>
                  <div
                      className="timeSelect"
                      id={`${this.props.type}light`}
                      style={divHiddenOverflow}
                      onScroll={(e) => {
                          this.startLightTimeScroll(e);
                        }}
                    >
                      <div style={{
                          'position': 'absolute',
                          'borderTop': '1px solid rgba(0, 0, 0, 0.2)',
                          'width': '190px',
                          'marginLeft': '20px'
                        }}
                        >
                        </div>
                      <div style={{
                          'position': 'absolute',
                          'borderBottom': '1px solid rgba(0, 0, 0, 0.2)',
                          'width': '190px',
                          'marginLeft': '20px',
                          paddingTop: '34px'
                        }}
                        >
                        </div>
                      {this.dateNumberDom
                            }

                    </div>
                </div>
              <div style={rightStyle}>
                  <div
                      style={divHiddenRightOverflow}
                      className="timeSelect"
                      id={`${this.props.type}right`}
                      onScroll={(e) => {
                          this.startLightTimeScroll(e);
                        }}
                    >
                      <div style={{ 'position': 'absolute', 'width': '190px', 'marginLeft': '20px' }} />
                      <div style={{
                          'position': 'absolute',
                          'width': '190px',
                          'marginLeft': '20px',
                          paddingTop: '34px'
                        }}
                        >
                        </div>
                      {this.timeNumberDom}
                    </div>
                </div>
              <div style={rightStyle}>
                  <div
                      style={divHiddenRightOverflow}
                      className="timeSelect"
                      id={`${this.props.type}second`}
                      onScroll={(e) => {
                          this.startLightTimeScroll(e);
                        }}
                    >
                      <div style={{ 'position': 'absolute', 'width': '140px', 'marginLeft': '20px' }} />
                      <div style={{
                          'position': 'absolute',
                          'width': '140px',
                          'marginLeft': '20px',
                          paddingTop: '34px'
                        }}
                        >
                        </div>
                      {this.secondNumberDom}
                    </div>
                </div>
            </div>
          <div style={buttonDivStyle2}>
              <Button onClick={() => {
                  this.commitDate();
                }}
                >
确定

                </Button>
            </div>
        </div>
      );
    }

    commitDate = () => {
      const hour = this.lightTime === '' ? '00' : ('' + this.lightTime).length == 1 ? '0' + this.lightTime : '' + this.lightTime;
      const minute = this.rightTime === '' ? '00' : ('' + this.rightTime).length == 1 ? '0' + this.rightTime : '' + this.rightTime;
      const second = this.secondTime === '' ? '00' : ('' + this.secondTime).length == 1 ? '0' + this.secondTime : '' + this.secondTime;
      const state = {
        hour,
        minute,
        second
      };
      this.props.onSetTime(state);
    }

    startLightTimeScroll = (e) => {
      const _this = this;
      const container = e.target;
      const nodeList = container.childNodes;
      const id = container.id;

      const targetValue = Math.round(container.scrollTop / 32);
      let targetDom = null;
      if (nodeList.length < 30 && id === `${this.props.type}light`) {
        // date
        if (targetValue < 10) {
          const targetId = `${this.props.type}light-date-0${targetValue}`;
          targetDom = document.getElementById(targetId);
        } else {
          const targetId = `${this.props.type}light-date-${targetValue}`;
          targetDom = document.getElementById(targetId);
        }
        _this.lightTime = targetValue;
      } else if (nodeList.length > 30 && id === `${this.props.type}right`) {
        // time
        if (targetValue < 10) {
          const targetId = `${this.props.type}right-time-0${targetValue}`;
          targetDom = document.getElementById(targetId);
        } else {
          const targetId = `${this.props.type}right-time-${targetValue}`;
          targetDom = document.getElementById(targetId);
        }
        _this.rightTime = targetValue;
      } else if (nodeList.length > 30 && id === `${this.props.type}second`) {
        // time
        if (targetValue < 10) {
          const targetId = `${this.props.type}second-second-0${targetValue}`;
          targetDom = document.getElementById(targetId);
        } else {
          const targetId = `${this.props.type}second-second-${targetValue}`;
          targetDom = document.getElementById(targetId);
        }
        _this.secondTime = targetValue;
      }
      if (targetDom !== null) {
        for (let i = 0; i < nodeList.length; i++) {
          nodeList[i].style.fontWeight = 400;
        }
        targetDom.style.fontWeight = 900;
      }
    }

    componentDidMount() {
      this.dateNumberDom = this.dateNumber(`${this.props.type}light`, `${this.props.type}LightTime`);
      this.timeNumberDom = this.timeNumber(`${this.props.type}right`, `${this.props.type}RightTime`);
      this.secondNumberDom = this.secondNumber(`${this.props.type}second`, `${this.props.type}second`);
    }

    bindScrollEvent(time) {
      if (time && /([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/.test(time)) {
        const light = document.getElementById(`${this.props.type}light`);
        const right = document.getElementById(`${this.props.type}right`);
        const second = document.getElementById(`${this.props.type}second`);
        if (time && light && right && second) {
          const timeList = time.split(':');

          const lightTimes = timeList[0] * 32;
          const rightTimes = timeList[1] * 32;
          const secondTimes = timeList[2] * 32;
          if (timeList[0] < 10) {
            const targetId = `${this.props.type}light-date-0${lightTimes}`;
            changeStyle(targetId);
          } else {
            const targetId = `${this.props.type}light-date-${lightTimes}`;
            changeStyle(targetId);
          }
          light.scrollTo(0, lightTimes);
          if (timeList[1] < 10) {
            const targetId = `${this.props.type}right-time-0${rightTimes}`;
            changeStyle(targetId);
          } else {
            const targetId = `${this.props.type}right-time-${rightTimes}`;
            changeStyle(targetId);
          }
          right.scrollTo(0, rightTimes);
          if (timeList[2] < 10) {
            const targetId = `${this.props.type}second-second-0${secondTimes}`;
            changeStyle(targetId);
          } else {
            const targetId = `${this.props.type}second-second-${secondTimes}`;
            changeStyle(targetId);
          }
          second.scrollTo(0, secondTimes);

          function changeStyle(str) {
            const targetDom = document.getElementById(str);

            if (targetDom) {
              targetDom.style.fontWeight = 900;
            }
          }
        }
      }
    }
}

SuperDropDown.propTypes = {};

export default SuperDropDown;
